<template>
  <div class="tree-content">
    <!-- <van-checkbox-group v-model="result"> -->
    <van-collapse v-model="activeNames">
      <div v-for="item in menuTreeArr" :key="item.id" :name="item.id">
        <van-collapse-item v-if="item.children" :name="item.id">
          <template #title>
            <van-swipe-cell>
              <van-cell :border="false" :title="item.organizationName" />
              <template #right>
                <van-button square type="info" text="修改" @click.native.stop="handleClick(item)" />
                <van-button v-if="item.children" square type="primary" text="新增" @click.native.stop="handleClickEdit(item)" />

              </template>
            </van-swipe-cell>

          </template>
          <MenuTree v-if="item.children&&item.children.length!==0" :menu-tree-arr="item.children" @nodeClickEdit="getCurrentNodeEdit" @nodeClick="getCurrentNode" />

        </van-collapse-item>
        <van-cell
          v-else
          :key="item"
          @click="toggle(index)"
        >
          <template #title>
            <van-swipe-cell>
              <van-cell style="padding-left:16.0px;box-sizing:border-box;" :border="false" :title="item.organizationName" />
              <template #right>
                <van-button square type="info" text="修改" @click.native.stop="handleClick(item)" />
                <van-button v-if="item.children" square type="primary" text="新增" @click.native.stop="handleClickEdit(item)" />
                <van-button v-if="roleType==='0'" square type="danger" text="删除" @click.native.stop="handleDelete(item)" />
              </template>
            </van-swipe-cell>
          </template>
        </van-cell>

      </div>
    </van-collapse>
    <!-- </van-checkbox-group> -->

    <!-- {{ menuTreeArr }} -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Collapse, CollapseItem, Toast } from 'vant'

Vue.use(Collapse)
Vue.use(CollapseItem)
import { Checkbox, CheckboxGroup } from 'vant'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)
export default {
  name: 'MenuTree',
  props: {
    menuTreeArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      result: [],
      options: {
        checkbox: true
      },
      activeNames: ['1'],
      roleType: ''
    }
  },
  watch: {
    result(arg) {
    }
  },
  created() {
    this.roleType = sessionStorage.getItem('userRole')
  },
  methods: {
    handleClick(node) {
      this.$emit('nodeClick', node)
    },
    getCurrentNode(node) {
      this.$emit('nodeClick', node)
    },
    handleClickEdit(node) {
      this.$emit('nodeClickEdit', node)
    },
    handleDelete(node) {
      // this.$emit('handleNodeDelete', node)
      this.$emit('handleNodeDelete', node)
    },
    getCurrentNodeEdit(node) {
      this.$emit('nodeClickEdit', node)
    },
    getNodes(arr) {
      arr.forEach(item => {
        if (item.children) {
          this.getNodes(item.children)
        } else {
          if (item.checked) {
            this.result.push({ organizationCode: item.organizationCode, parentCode: item.parentCode, belongCounty: item.belongCounty })
          }
        }
      })
    },
    findNode(node, arg) {
    //   alert(JSON.stringify(arg))
      if (arg.children) {
        arg.forEach(item => {
          this.findNode(node, item.children)
          if (item.organizationCode === node.parentCode) {
            this.$set(item, 'checked', node.checked)
          }
        })
      }
    },
    getNodesArr() {
      this.result = []
      this.getNodes(this.menuTreeArr)
      return this.result
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-content{
    width:100%;
    height:100%;
}
::v-deep .vs-tree-node{
    font-size:32px;
}
::v-deep .van-cell{
  display:flex;
  align-items:center;
}
::v-deep .van-cell--clickable:active{
  background-color: #ffffff;
}
</style>
